
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, reactive, nextTick } from "vue";
import * as echarts from "echarts";
import { echars_left_1, echars_left_2, echars_left_3, echars_right_1, echars_right_2, echars_right_3,echars_midd_1 } from "@/utils/echars_home.ts"
import { useWindowSize } from '@/utils/useWindowSize.ts';  // 导入自定义的 useWindowSize
// 调用 useWindowSize 获取窗口的宽度和高度
const { windowWidth, windowHeight } = useWindowSize();
console.log("浏览器的参数", windowWidth.value, windowHeight.value)
// 左侧图表1
const chartDomLeft_1 = ref(null);
// 左侧图表2
const chartDomLeft_2 = ref(null);
// 左侧图表3
const chartDomLeft_3 = ref(null);
// // 左侧图表4
// const chartDomLeft_4 = ref(null);
// 右侧图表1
const chartDomRight_1 = ref(null);
// 右侧图表2
const chartDomRight_2 = ref(null);
// 右侧图表3
const chartDomRight_3 = ref(null);
const chartDomMidd_1 = ref(null);
// // 右侧图表4
// const chartDomRight_4 = ref(null);



const ueValue = ref('');
// 前端发送消息到ue
const sendUeMsg = () => {
  // 第一个参数为函数名，第二个参数为数据
  ue5("callbackTestCall", "hello 杨涛")
}

ue.interface.getUeTestCall = (data) => {
  alert(res)
  ueValue.value = res.Args
}
onMounted(async () => {
  await nextTick(); // 确保DOM已经渲染完成
  // 左侧图表1
  await echars_left_1(chartDomLeft_1)
  // 左侧图表2
  await echars_left_2(chartDomLeft_2)
  // 左侧图表3
  await echars_left_3(chartDomLeft_3)
  // 左侧图表4
  // await echars_left_4(chartDomLeft_4)
  // 右侧图表1
  await echars_right_1(chartDomRight_1)
  // 右侧图表2
  await echars_right_2(chartDomRight_2)
  // 右侧图表3
  await echars_right_3(chartDomRight_3)
  // 中间底部图表1
  await echars_midd_1(chartDomMidd_1)
  // 右侧图表4
  // await echars_right_4(chartDomRight_4)
});
</script>   

<template>
  <!-- <FitScreen :width="1920" :height="1080" mode="fit"> -->
    <div class="main"> 
      <div class="header-top" @click="sendUeMsg">智慧配电中心{{ ueValue }}</div>
      <div class="header-bom">
        <div class="bom-left">
          <div class="bom-left-item">
            <div class="titleOne">标题一</div>
            <div ref="chartDomLeft_1" style="width: 100%; height: 80%;"></div>
          </div>
          <div class="bom-left-item">
            <div class="titleOne">标题二</div>
            <div ref="chartDomLeft_2" style="width: 100%; height: 80%;"></div>
          </div>
          <div class="bom-left-item">
            <div class="titleOne">标题三</div>
            <div ref="chartDomLeft_3" style="width: 100%; height: 80%;"></div>
          </div>
          <!-- <div class="bom-left-item">
            <div ref="chartDomLeft_4" style="width: 100%; height: 100%;"></div>
          </div> -->
        </div>
        <div class="bom-midd">
          <div class="bom-midd-top"></div>
          <div class="bom-midd-bom">
            <div class="titleOne">数据分析</div>
            <!-- <div class="bom-midd-bom-item" v-for="(item, index) in 4" :key="index">电柜{{ index + 1 }}</div> -->   
            <div ref="chartDomMidd_1" style="width: 100%; height: 80%;"></div>
          </div>
        </div>
        <div class="bom-right">
          <div class="bom-right-item">

            <div class="titleOne">
              标题一 
            </div>
            <div ref="chartDomRight_1" style="width: 100%; height: 80%;"></div>
          </div>
          <div class="bom-right-item">
            <div class="titleOne">标题二</div>   
            <div ref="chartDomRight_2" style="width: 100%; height: 80%;"></div>
          </div>
          <div class="bom-right-item">
            <div class="titleOne">标题三</div>
            <div ref="chartDomRight_3" style="width: 100%; height: 80%;"></div>
          </div>
          <!-- <div class="bom-right-item">
            <div ref="chartDomRight_4" style="width: 100%; height: 100%;"></div>
          </div> -->
        </div>
      </div>

    </div>
  <!-- </FitScreen> -->
</template>

<style lang='scss' scoped>
@use "index";
</style>
